/* eslint-disable react/button-has-type */
/* eslint-disable no-shadow */
import React, { FC } from "react";
import styles from "../style.less";

export interface StepperProps {
  value: number;
  integer?: boolean; // 是否取整展示
  step?: number; // 增减数值
  onChange: (type: string, value?: any, index?: number) => void;
  index: number;
}

const Stepper: FC<StepperProps> = props => {
  const { value, onChange, index } = props;
  // eslint-disable-next-line func-names
  const clickButton = function(type: string, index: number){
    if(type === 'minus') {
      if(value - 1 < 0){
        return;
      }
      onChange('number', value -1, index);
    }else {
      onChange('number', value + 1, index);
    }
  };
  return (
    <div className={styles.stepper}>
      <button className={styles.minus} onClick={() => clickButton('minus', index)} />
      <input readOnly type="number" className={styles.input} value={value}  />
      <button className={styles.plus} onClick={() => clickButton('plus', index)} />
    </div>
  )
};

export default Stepper;
